<template>
  <el-dialog :title="!dataForm.id ? '新增分类' :'修改分类'" :close-on-click-modal="false" append-to-body :visible.sync="visible"
    class="JNPF-dialog JNPF-dialog_center" lock-scroll width="600px">
    <el-row :gutter="15" class="">
      <el-form ref="elForm" :model="dataForm" :rules="rules" size="small" label-width="100px" label-position="right">
        <template v-if="!loading">
          <el-col :span="24">
            <el-form-item label="上级分类" prop="parentId">
              <JNPF-TreeSelect v-model="dataForm.parentId" :disabled="!!dataForm.id" :options="treeData" :props="parentIdProps" :defaultExpandAll="false" placeholder="选择上级分类" />
              <!-- <el-select v-model="dataForm.parentId" placeholder="选择上级分类" clearable :style='{"width":"100%"}' @focus="getTreeView">
                <el-option v-for="(item, index) in parentIdOptions" :key="index" :label="item.name" :value="item.id"></el-option>
              </el-select> -->
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="分类名称" prop="name">
              <el-input v-model="dataForm.name" placeholder="输入分类名称" :maxlength="20" clearable
                :style='{"width":"100%"}'>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="分类编码" prop="code">
              <el-input v-model="dataForm.code" placeholder="输入分类编码" :maxlength="10" clearable
                :style='{"width":"100%"}'>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="dataForm.remark" placeholder="最多输入200字" show-word-limit :maxlength="200" :style='{"width":"100%"}' true type="textarea"
                :autosize='{"minRows":4,"maxRows":4}'>
              </el-input>
            </el-form-item>
          </el-col>
        </template>
      </el-form>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false"> 取 消</el-button>
      <el-button type="primary" @click="dataFormSubmit()" :loading="btnLoading"> 保 存</el-button>
    </span>
  </el-dialog>
</template>
<script>
  import { getGoodsTypeTree, getGoodsType, addGoodsType, updateGoodsType } from '@/api/asso/goods/category'

  export default {
    components: {},
    props: [],
    data() {
      return {
        visible: false,
        loading: false,
        btnLoading: false,
        dataForm: {
          parentId: "",
          name: '',
          code: '',
          remark: '',
          creatorUserId: '',
          creatorTime: '',
        },
        rules: {
          parentId: [{
            required: true,
            message: '选择上级分类',
            trigger: 'change'
          }, ],
          name: [{
            required: true,
            message: '输入分类名称',
            trigger: 'blur'
          }, ],
          code: [{
            required: true,
            message: '输入分类编码',
            trigger: 'blur'
          }, ],
        },
        treeData: [],
        parentIdProps: {
          value: 'id',             // ID字段名
          label: 'name',       // 显示名称
          children: 'children',    // 子级字段名
          disabled: false
        }
      }
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {},
    methods: {
      getTreeView() {
        getGoodsTypeTree().then(res => {
          if(res.code == 200){
            let topItem = {
              name: "商品分类",
              hasChildren: true,
              id: "-1",
              children: JSON.parse(JSON.stringify(res.data.list))
            }
            this.treeData = [topItem]
          }
        })
      },
      clearData() {
        this.dataForm.parentId = "";
        this.dataForm.name = '';
        this.dataForm.code = '';
        this.dataForm.remark = '';
        this.dataForm.creatorUserId = '';
        this.dataForm.creatorTime = '';
      },
      init(id) {
        this.dataForm.id = id || 0;
        this.visible = true;
        this.$nextTick(() => {
          this.getTreeView();
          this.$refs['elForm'].resetFields();
          if (this.dataForm.id) {
            this.loading = true
            getGoodsType(this.dataForm.id).then((res) => {
              this.dataInfo(res.data)
              this.loading = false
            }).catch(() => {
              this.loading = false
            })
          } else {
            this.clearData()
          }
        });
        this.$store.commit('generator/UPDATE_RELATION_DATA', {})
      },
      // 表单提交
      dataFormSubmit() {
        this.$refs['elForm'].validate((valid) => {
          if (valid) {
            this.request()
          }
        })
      },
      request() {
        this.btnLoading = true
        let _data = this.dataList()
        if (!this.dataForm.id) {
          // 新增
          addGoodsType(_data).then((res) => {
            this.$message({
              message: res.msg,
              type: 'success',
              duration: 1000,
              onClose: () => {
                this.visible = false
                this.btnLoading = false
                this.$emit('refreshGoodsType', true)
              }
            })
          }).catch(() => {
            this.btnLoading = false
          })
        } else {
          // 修改
          updateGoodsType(this.dataForm.id, _data).then((res) => {
            this.$message({
              message: res.msg,
              type: 'success',
              duration: 1000,
              onClose: () => {
                this.visible = false
                this.btnLoading = false
                this.$emit('refreshGoodsType', true)
              }
            })
          }).catch(() => {
            this.btnLoading = false
          })
        }
      },
      dataList() {
        var _data = JSON.parse(JSON.stringify(this.dataForm));
        return _data;
      },
      dataInfo(dataAll) {
        let _dataAll = dataAll
        this.dataForm = _dataAll
      },
    },
  }
</script>
